<template>
  <view>
    <uni-nav-bar title="新建网点" left-icon="back" @clickLeft="back">
    </uni-nav-bar>
    <view class="content">
      <view style="padding: 10px 15px">
        <uni-forms ref="baseForm" :rules="baseFormRules" :modelValue="baseFormData">
          <uni-forms-item label="部门" name="dept" required>
            <uni-data-select
                v-model="value"
                :localdata="deptList"
                @change="change"
            ></uni-data-select>
          </uni-forms-item>
          <uni-forms-item label="网点名称" name="storeName" required>
            <uni-easyinput
                v-model="baseFormData.storeName"
                placeholder="请输入网点名称"
            />
          </uni-forms-item>
          <uni-forms-item label="网点城市" name="city" required>
            <uni-easyinput
                v-model="baseFormData.city"
                placeholder="请选择网点城市"
            />
          </uni-forms-item>
          <uni-forms-item label="网点地址" name="addr" required>
            <uni-easyinput
                v-model="baseFormData.addr"
                placeholder="请选择网点地址"
                suffixIcon="location"
                @iconClick="scanClick"
            />
          </uni-forms-item>
          <uni-forms-item label="联系人" name="contact" required>
            <uni-easyinput
                v-model="baseFormData.contact"
                placeholder="请输入联系人"
            />
          </uni-forms-item>
          <uni-forms-item label="联系电话" name="phone" required>
            <uni-easyinput
                v-model="baseFormData.phone"
                placeholder="请输入联系电话"
            />
          </uni-forms-item>
          <uni-forms-item label="网点图标">
            <uni-easyinput
                v-model="baseFormData.icon"
                placeholder="请选择设备地址"
            />
          </uni-forms-item>
          <uni-forms-item label="网点说明">
            <uni-easyinput
                v-model="baseFormData.remark"
                placeholder="请输入网点说明"
            />
          </uni-forms-item>
        </uni-forms>
        <button
            type="default"
            style="background-color: #2f54eb; color: #ffffff"
            @click="submit('baseForm')"
        >
          保存
        </button>
      </view>
    </view>
    <uni-popup
        ref="popup"
        background-color="#fff"
        @change="change"
        borderRadius="15px 15px 0 0"
    >
      <view class="popup-content">
        <uni-list>
          <uni-list-item
              v-for="(item, index) in sitePoint"
              :key="index"
              :title="item.title"
              clickable
              @click="onClick(item)"
          />
        </uni-list>
      </view>
    </uni-popup>
  </view>
</template>

<script>

import {createStation} from "@/api/device/station";
import {getDeptList} from "@/api/device/device";

export default {
  data() {
    return {
      title: "新建网点",
      baseFormData: {
        storeName: "测试售卖网点",
        city: "杭州市",
        addr: "临平区锦耀大厦",
        contact: "李鑫",
        remark: "第一个",
        phone: "18656768936",
        icon: "icon",
      },
      baseFormRules: {
        storeName: {
          rules: [{
            required: true,
            errorMessage: '请输入名称',
          }]
        },
        city: {
          rules: [{
            required: true,
            errorMessage: '请输入城市',
          }]
        },
        addr: {
          rules: [{
            required: true,
            errorMessage: '请输入地址',
          }]
        },
      },
      sitePoint: [
        {
          title: "站点1",
          id: 0,
        },
        {
          title: "站点2",
          id: 1,
        },
        {
          title: "站点3",
          id: 2,
        },
      ],
      value: 0,
      deptList: []
    };
  },
  onShow() {
    this.getDept();
  },
  methods: {
    open() {
      this.$refs.popup.open("bottom");
    },
    change(e) {
      if (!e.show) {
      }
      console.log("弹窗状态改变：", e);
    },
    getDept() {
      getDeptList().then((res) => {
        this.deptList = res.data;
        this.deptList.forEach((item) => {
          item.value = item.id;
          item.text = item.name;
        });
        console.log(this.deptList);
      });
    },
    onClick(e) {
      this.baseFormData.siteName = e.title;
      uni.showToast({
        title: e.title,
        icon: "none",
      });
      this.$refs.popup.close();
    },
    scanClick(type) {
      const _this = this;
      uni.scanCode({
        success: function (res) {
          console.log("条码类型：" + res.scanType);
          console.log("条码内容：" + res.result);
          _this.baseFormData.deviceId = JSON.parse(res.result).deviceNumber;
          console.log(_this.baseFormData);
        },
        fail: function (res) {
          console.log(res);
        },
      });
    },
    submit(ref) {
      this.$refs[ref].validate()
          .then((res) => {
            this.baseFormData.storeAddress = this.baseFormData.city + " " + this.baseFormData.addr;
            this.baseFormData.storeStatus = 1;
            createStation(this.baseFormData)
                .then((res) => {
                  if (res.code === 0) {
                    uni.navigateBack();
                  }
                });
          })
          .catch((err) => {
            console.log("err", err);
          });
    },
    back() {
      uni.navigateBack()
    },
  },
};
</script>

<style>
.content {
  background-color: #fff;
}
</style>
